<ActionBar class="action-bar">
  <Label class="action-bar-title" text="Face detection"></Label>
</ActionBar>

<GridLayout rows="6/8*, 2/8*">
  <GridLayout row="0">
    <MLKitFaceDetection
        width="100%"
        height="100%"
        processEveryNthFrame="30"
        enableFaceTracking="true"
        minimumFaceSize="0.2"
        preferFrontCamera="true"
        modeType="accurate"
        (scanResult)="onFaceDetectionResult($event)">
    </MLKitFaceDetection>

    <GridLayout rows="*, 250, *" columns="*, 5/6*, *">
      <Label class="mask" row="0" col="0" colSpan="3"></Label>
      <Label class="mask" row="2" col="0" colSpan="3"></Label>
      <Label class="mask" row="1" col="0"></Label>
      <Label class="mask" row="1" col="2"></Label>
      <GridLayout row="1" col="1" rows="1/6*, *, 1/6*" columns="1/6*, *, 1/6*">
        <Label class="frame-top-left" row="0" col="0"></Label>
        <Label class="frame-top-right" row="0" col="2"></Label>
        <Label class="frame-bottom-left" row="2" col="0"></Label>
        <Label class="frame-bottom-right" row="2" col="2"></Label>
        <StackLayout class="swing" row="0" col="0" colSpan="3">
          <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.1)"></Label>
          <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.2)"></Label>
          <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.3)"></Label>
          <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.4)"></Label>
          <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.5)"></Label>
          <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.6)"></Label>
          <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.7)"></Label>
          <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.8)"></Label>
          <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 0.9)"></Label>
          <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 1)"></Label>
        </StackLayout>
      </GridLayout>
      <Label row="0" col="1" class="text-center c-white" textWrap="true" color="white" verticalAlignment="center" text="The scanner has been configured to detect faces every 30th frame (default is 10). You can tweak this in your usage of the plugin."></Label>
      <StackLayout row="2" col="0" colSpan="3">
        <Label [text]="mlKitAllOK" textWrap="true" class="m-t-5 font-weight-bold c-white" [class.c-blue]="allSmilingAndEyesOpen"></Label>
        <GridLayout row="auto" columns="60, *, *, *" class="m-t-5">
          <Label row="0" col="0" class="mlkit-result font-weight-bold" textWrap="true" text="ID"></Label>
          <Label row="0" col="1" class="mlkit-result font-weight-bold" textWrap="true" text="Smiling"></Label>
          <Label row="0" col="2" class="mlkit-result font-weight-bold" textWrap="true" text="Left 👁 open"></Label>
          <Label row="0" col="3" class="mlkit-result font-weight-bold" textWrap="true" text="Right 👁 open"></Label>
        </GridLayout>
      </StackLayout>
    </GridLayout>
  </GridLayout>

  <ListView backgroundColor="black" row="1" [items]="faces">
    <ng-template let-item="item">
      <GridLayout columns="50, *, *, *">
        <Label col="0" class="mlkit-result c-white" [text]="item.trackingId" textWrap="true"></Label>
        <Label col="1" class="mlkit-result c-white" [class.c-purple]="item.smilingProbability > 0.7" [text]="item.smilingProbability | number" textWrap="true"></Label>
        <Label col="2" class="mlkit-result c-white" [class.c-purple]="item.leftEyeOpenProbability > 0.7" [text]="item.leftEyeOpenProbability | number" textWrap="true"></Label>
        <Label col="3" class="mlkit-result c-white" [class.c-purple]="item.rightEyeOpenProbability > 0.7" [text]="item.rightEyeOpenProbability | number" textWrap="true"></Label>
      </GridLayout>
    </ng-template>
  </ListView>

  <!-- not needed; we're using the front camera ;) -->
  <!--<GridLayout rows="auto" columns="auto, auto" horizontalAlignment="right" class="m-t-4 m-r-8">-->
    <!--<Label col="0" text="Torch" class="c-white" [class.disabled]="!torchOn"></Label>-->
    <!--<Switch col="1" [checked]="torchOn" (checkedChange)="toggleTorch($event)"></Switch>-->
  <!--</GridLayout>-->

</GridLayout>
